import React, { useState, useEffect } from 'react';
import { Table, Tag, Space,Button } from 'antd';
import './RoleList.css';
import axios from 'axios';

function RoleList() {
  const [roles, setRoles] = useState([]);
  const [loading, setLoading] = useState(true);

  const columns = [
    {
      title: '角色名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      align: 'center',
    },
    {
      title: '状态',
      key: 'status',
      align: 'center',
      dataIndex: 'status',
      render: (status) => (
        <Tag color={status === 'active' ? 'green' : 'red'}>
          {status === 'active' ? '启用' : '禁用'}
        </Tag>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 120, 
      align: 'center',
      render: (_, record) => (
        <Space size="middle">
          <a>编辑</a>
          <a>删除</a>
        </Space>
      ),
    },
  ];

  // 模拟数据
  useEffect(() => {
    const mockRoles = [
      {
        key: '1',
        name: '管理员',
        description: '系统管理员',
        status: 'active',
        createTime: '2024-01-01',
      },
      {
        key: '2',
        name: '普通用户',
        description: '普通用户权限',
        status: 'active',
        createTime: '2024-01-02',
      },
      {
        key: '3',
        name: '访客',
        description: '访客权限',
        status: 'inactive',
        createTime: '2024-01-03',
      },
    ];
    
    setRoles(mockRoles);
    setLoading(false);
  }, []);

  return (
    <div>
      <Button 
        type="primary" 
        onClick={() => console.log('添加角色')}
        className="addRole"
      >
        新增角色
      </Button>
      <Table 
        columns={columns} 
        dataSource={roles} 
        loading={loading}
        scroll={{ x: 1000 }}
        footer={() => (
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span>总角色数：{roles.length}</span>
            <span>活跃角色：{roles.filter(role => role.status === 'active').length}</span>
          </div>
        )}
        pagination={{
          pageSize: 10,
          total: roles.length,
          showTotal: (total) => `共 ${total} 条`,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50', '100'],
          position: ['bottomCenter']
        }}
      />
    </div>
  );
}

export default RoleList;